---
title: Generating client types
description: Guide for generating client types from a Pothos schema
---

Pothos does not have a built in mechanism for generating types to use with a client, but
[graphql-code-generator](https://www.graphql-code-generator.com/) can be configured to consume a
schema directly from your typescript files.

## Export your schema

The first thing you will need is a file that exports your built schema. The schema should be
exported as `schema` or as the default export. This will be used to generate your client types, but
can also be the schema you use in your server.

```typescript
// schema.ts

// Import the builder
import builder from './builder';

// Import your type definitions
import './types/Query';
import './types/User';
import './types/Posts';

// Build and export the schema
export const schema = builder.toSchema();
```

## Setting up graphql-code-generator

There are many different ways to set up graphql-code-generator, and the details depend a lot on your
needs.

See the
[graphql-code-generator documentation](https://www.graphql-code-generator.com/docs/getting-started/installation)
for more details.

### Install the codegen packages

```package-install
npm install --save graphql
npm install --save -D typescript @graphql-codegen/cli @graphql-codegen/client-preset
```

### Configure the codegen to import your schema

Create a `codegen.ts` file in the root of your project:

```typescript
import type { CodegenConfig } from '@graphql-codegen/cli';
import { printSchema } from 'graphql';
import { schema } from './src/schema';

const config: CodegenConfig = {
  schema: printSchema(schema),
  documents: ['src/**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
    },
  },
};

export default config;
```

You can customize this config as needed, but the relevant parts are:

- Importing your GraphQL schema, this should be the result of calling `builder.toSchema({})`
- using `printSchema` from `graphql` to convert the schema to a string

## Generating a schema.graphql file with graphql-code-generator

You can generate a schema.graphql file with graphql-code-generator by adding the `schema-ast`
plugin:

```package-install
npm install --save -D @graphql-codegen/schema-ast
```

```typescript
// codegen.ts
import { printSchema } from 'graphql';
import type { CodegenConfig } from '@graphql-codegen/cli';
import { schema } from './src/schema';

const config: CodegenConfig = {
  schema: printSchema(schema),
  documents: ['src/**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
    },
    'schema.graphql': {
      plugins: ['schema-ast'],
    },
  },
};

export default config;
```

## Adding scalars

If you are using scalars (e.g. from `graphql-scalars`), you will need to add them to `codegen.ts` or
else they will resolve to `any`. Here is an example for `UUID` and `DateTime`:

```typescript
const config: CodegenConfig = {
  ...,
  config: {
    scalars: {
      UUID: 'string',
      DateTime: 'Date',
    },
  },
};
```

## Alternatives

In some cases you may want to use an alternative method for loading you schema.

### Printing the schema to a file

You can use the `printSchema` function from `graphql` to print your schema to a file, see
[Printing Schemas](/docs/guide/printing-schemas) for more details:

By writing the schema to a file, you will be able to load the schema from a file instead importing
it each time you want to generate your schema.

Having your schema written to a file, and checked into source control has many benifits, like easier
code reviews, and better interoperability with other schema dependent graphql tools, so setting this
up is worth while even if you do not need it for generating client types:

```typescript
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: './path/to/schema.graphql',
  documents: ['src/**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
    },
  },
};

export default config;
```

### Using introspection from your dev (or production) server

Rather than using a schema SDL file, graphql-code-generator can also can use introspection to load
your schema. To do this, you will need to ensure that your server has introspection enabled, most
servers will have introspection enabled by default in development, and disabled in production.

You can then configure graphql-code-generator to use introspection by passing the URL to your
graphql endpoint:

```typescript
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'https://localhost:3000/graphql',
  documents: ['src/**/*.tsx'],
  generates: {
    './src/gql/': {
      preset: 'client',
      plugins: [],
    },
  },
};

export default config;
```
